<template>
  <div class="view-fill">
    <div v-if="!modifyInfo.visible" class="app-container-flex">
      <FullScreen
        v-model="showDialog"
        title="人工费用详情"
        @returnBack="returnBack"
      >
        <template v-slot:full-button>
          <el-button v-if="canUpdate" @click="update">修改</el-button>
        </template>
        <div class="model-panel">
          <div class="model-panel-title">
            <p>人工费用明细信息</p>
          </div>
          <div class="model-panel-body">
            <div class="flex_full_item">
              <!-- 表格 -->
              <PageTable
                v-model:data="tableInfo.data"
                :pager="false"
                :checkBox="false"
                :tab-index="true"
                :isDynamic="true"
                :field-list="tableInfo.fieldList"
              >
              </PageTable>
            </div>
          </div>
        </div>
      </FullScreen>
    </div>

    <Modify
      v-if="modifyInfo.visible"
      v-model:visible="modifyInfo.visible"
      :orderId="modifyInfo.orderId"
      :title="modifyInfo.title"
      @returnModify="returnModify"
    />
  </div>
</template>

<script setup>
const Modify = defineAsyncComponent(() => import('./modify'))
import { getAssetAnalysisById } from '@/api/asset.js'
import { getAssetMonthIncomeCostQuery } from '@/api/dataQuery.js'

const { proxy } = getCurrentInstance()
const props = defineProps(['visible', 'id'])
const modifyInfo = ref({
  visible: false,
  title: '',
  orderId: '',
})
// 表格相关
const tableInfo = ref({
  api: null,
  refresh: 1,
  initCurpage: 1,
  data: [],
  fieldList: [
    {
      label: '日期',
      value: 'produceTime',
    },
    { label: '分析方案编码', value: 'planNo' },
    { label: '分析方案名称', value: 'planName' },
    { label: '分析部门', value: 'deptName' },
    {
      label: '资产卡片号',
      value: 'assetCode',
    },
    { label: '资产名称', value: 'assetName' },
    { label: '规格', value: 'standard' },
    { label: '厂家', value: 'brandName' },
    { label: '使用部门', value: 'useDeptName' },
    { label: '管理部门', value: 'manageDeptName' },
    { label: '工号', value: 'productCode' },
    { label: '人工名称', value: 'commonName' },
    { label: '规格型号', value: 'productStandard' },
    { label: '厂家', value: 'productBrandName' },
    { label: '单价', value: 'price' },
    { label: '计量单位', value: 'unitName' },
    { label: '消耗数量', value: 'qty' },
    { label: '消耗金额', value: 'amount' },
  ],
})
const showDialog = computed({
  get() {
    return props.visible
  },
  set(val) {
    proxy.$emit('update:visible', val) // 更新父组件visible
  },
})
const canUpdate = computed(() => {
  return proxy.$permission('assetArtificialDetail:update')
})

onMounted(() => {
  if (props.id) {
    getMain()
  }
})
function returnModify() {
  getMain()
}
function returnBack() {
  proxy.$emit('returnBack', false)
}
//更新
function update() {
  modifyInfo.value.title = '修改人工费用'
  modifyInfo.value.orderId = infoList.value.data.id
  modifyInfo.value.visible = true
}
function getMain() {
  getAssetMonthIncomeCostQuery(props.id).then((res) => {
    if (res && res.success) {
      tableInfo.value.data = res.data
    }
  })
}
</script>
<style scoped lang="scss">
:deep(.table-scroll-hidden) > .el-table {
  overflow-y: hidden;
}
:deep(.el-dialog__body) {
  height: 355px;
  display: flex;
  flex-direction: column;
}
</style>
